<template>
	<view>
		<view class="nav-list">
			<view class="nav-item" :class="{active: curNav.id===item.id}" v-for="(item, index) in navList" :key="index" @click="handleChooseNav(item)">
				{{item.tit}} {{item.num || 0}}人
			</view>
		</view>

		<view class="list" v-if="list.length">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="l-w">
					<image class="avatar"	 :src="item.avater" mode=""></image>
					<view class="name">{{item.name}}</view>
				</view>
				<view class="r-w">{{item.time}}</view>
			</view>
		</view>
		
		<view class="nodata" v-else>这里还木有数据哈~~</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
					id: 1,
					tit: '一级好友'
				}, {
					id: 2,
					tit: '二级好友'
				}],
				curNav: {
					id: 1,
					tit: '一级好友'
				},
				page: {
					pageNum: 1,
					totalPageNum: 1,
					pageSize: 20,
				},
				list: []
			};
		},
		onLoad() {
			this.getList()
			this.getChildNum()
		},
		onPullDownRefresh() {
			this.page.pageNum = 1
			this.getList()
			this.getChildNum()
		},
		onReachBottom() {
			if (this.page.pageNum >= this.page.totalPageNum) return
			this.page.pageNum++
			this.getList()
		},
		methods: {
			getChildNum() {
				this.$http.get(this.$api.childNum).then(res => {
					if (res.code === 200) {
						this.navList[0].num = res.data.parentNum
						this.navList[1].num = res.data.grandNum
					}
				})
			},
			handleChooseNav(item) {
				this.curNav = item
				this.page.pageNum = 1
				this.getList()
			},
			getList() {
				this.$http.get(this.$api.promotionList,{
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
					number: this.curNav.id
				}).then(res => {
					if (res.code === 200) {
						uni.stopPullDownRefresh()
						this.page.totalPageNum =  Math.ceil(res.data.total / this.page.pageSize)
						this.list = this.page.pageNum == 1 ? res.data.result : [...this.list, ... res.data.result]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-list {
		display: flex;
		height: 88rpx;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1px solid #eee;
		background-color: #fff;

		.nav-item {
			font-size: 30rpx;
			font-weight: bold;
			height: 88rpx;
			line-height: 88rpx;
			&.active {
				position: relative;
				color: #00B4FF;
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 36rpx;
					height: 6rpx;
					border-radius: 3rpx;
					background-color: #00B4FF;
				}
			}
		}
	}
	.list {
		background-color: #fff;
		.item {
			display: flex;
			justify-content: space-between;
			height: 116rpx;
			align-items: center;
			padding: 0 30rpx;
			.l-w {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				.avatar {
					margin-right: 20rpx;
					height: 56rpx;
					width: 56rpx;
					border-radius: 50%;
				}
			}
			.r-w {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	
	.nodata {
		text-align: center;
		color: #999;
		margin: 100rpx auto;
	}
</style>
